<script setup>

</script>

<template>
  <div class="irregularity relative">
    <div class="irregularity-top absolute"></div>
    <div class="irregularity-left absolute"></div>
    <div class="irregularity-bottom absolute"></div>
  </div>
</template>

<style scoped lang="scss">
.irregularity {
  width: 138px;
  height: 65px;

  &-top {
    position: relative;
    width: 138px;
    height: 24px;
    background: rgba(60, 129, 152, 0.1);
    box-shadow: inset 0px 0px 32px 0px #346862;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #3B877E;
  }

  &-left {
    //background: linear-gradient(90deg, rgba(31, 206, 143, 0) 0%, #1FCE8F 100%);
    width: 0;
    height: 0;
    top: 20px;
    border-top: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 11px solid rgba(31, 206, 143, 1);

    border-left-image: linear-gradient(270deg, rgba(31, 206, 143, 1), rgba(16, 104, 72, 0)) 2 2;
  }

  &-bottom {
    //position: relative;
    top: 30px;
    width: 138px;
    height: 35px;
    background: rgba(60, 129, 152, 0.1);
    box-shadow: inset 0px 1px 23px 0px rgba(52, 104, 98, 0.5);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid rgba(52, 104, 98, 0.7);

    &::after {
      content: '';
      width: 17px;
      height: 17px;
      border-radius: 0px 0px 0px 0px;
      border-right: 2px solid #278754;
      border-bottom: 2px solid #278754;
      position: absolute;
      bottom: 0px;
      right: 0px;
    }
  }

}
</style>
